<script setup lang="ts">
import { reactive, ref } from "vue"
import { ElLoading, ElMessage, ElMessageBox } from "element-plus"
import { createCraneOperationRisk } from "../../../../../api/CraneOperation"

const emit = defineEmits(["changState"])
const signaturePadRef = ref(null)
const SignaturePadShow = ref(false)
const SignatureCopyArray = ref([])
const tableData = reactive([
  {
    safeMeasures:
      "涉及下述情况的吊装作业已编制作业方案，并已经审查批准；一、二级吊装作业；吊装物体质量所不足40t,但形状复杂，刚度小，长颈比大，精密贵重；作业条件特殊的三级吊装作业：环境温度低于-20℃的吊装作业；其他吊装作业环境、起重机械、吊物等情况复杂的情况。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures:
      "吊装区域影响内如有含危险物料的设备，管道时，已制定含相应防控措施的详细吊装方案，必要时停车，放空物料，置换后再进行吊装作业。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "吊装作业人员持有有效的法定资格证书，已按规定佩戴个体防护设备。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures:
      "已对起重吊装设备、钢丝绳（吊带），揽风绳、链条、吊钩等各种机具进行检查，安全可靠。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "已明确各自分工、坚守岗位，并统一规定联络信号。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "将建筑物、构筑物作为锚点，应经所属单位工程管理部门审查核算并批准。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "吊物的吊装路径应避开油气生产设备、管道。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "起重机与周围设施的安全距离不应小于0.5米。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures:
      "在沟(坑)边作业时，起重机临边侧支腿或履带等承重构件的外缘应与沟(坑)保持不小于其深度1.2倍的安全距离，且起重机作业位区域的地耐力满足吊装要求。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures:
      "起重机械的安全距离应大于起重机械的倒塌半径，吊装绳索、缆风绳、拖拉绳等不应与带电线路接触，并保持安全距离。不能满足时，应停电后再进行作业。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "不应利用管道、管架、电杆、机电设备等作吊装锚点。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "起重机械安全装置灵活好用。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "有侧支腿及支垫的起重机械，吊装作业前经检查支腿及支垫牢靠。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "吊物捆扎牢固，未见绳打结、绳不齐现象，棱角吊物已采取衬垫措施。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures:
      "地下通信电(光)缆、局域网电(光)缆、排水沟的盖板、承重吊装机械的负重量已确认，保护措施已落实。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "起吊物的质量( 吨)经确认，在吊装机械的承重范围内。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "在吊装高度的管线、电缆桥架已做好防护措施。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "作业现场围栏、警戒线、警告牌、夜间警示灯已按要求设置。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "作业高度和转臂范围内无架空线路。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "在爆炸危险场所内的作业，机动车排气管已装阻火器。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "露天作业，环境风力满足作业安全要求。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "其他相关特殊作业已办理相应安全作业许可证。",
    isInvolved: "",
    confirmPerson: ""
  },
  {
    safeMeasures: "其他安全措施：",
    isInvolved: "",
    confirmPerson: ""
  }
])
const dialogTableVisible = ref(false)
const checkInfo = ref({})
const props = defineProps({
  id: String
})
const organizer = ref()

function submitSignature() {
  const { isEmpty, data } = signaturePadRef.value.saveSignature()
  if (isEmpty) {
    ElMessage.error("请签名")
  } else {
    dialogTableVisible.value = false
    SignaturePadShow.value = false
    if (checkInfo.value == "organizer") {
      organizer.value = data
    } else {
      SignatureCopyArray.value.push(data)
      tableData.forEach((item) => {
        if (item.safeMeasures == checkInfo.value.safeMeasures) {
          item.confirmPerson = data
        }
      })
    }
  }
}

function other() {
  ElMessageBox.prompt("其他安全措施", "Tip", {
    confirmButtonText: "好的",
    cancelButtonText: "取消"
    // inputPattern: /^[0-9]*$/,
    // inputErrorMessage: "无效填写，应为纯数字"
  })
    .then(({ value }) => {
      tableData[22].safeMeasures = "其他安全措施:" + value
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消"
      })
    })
}

function fillingQuality() {
  ElMessageBox.prompt("吊物质量", "Tip", {
    confirmButtonText: "好的",
    cancelButtonText: "取消"
    // inputPattern: /^[0-9]*$/,
    // inputErrorMessage: "无效填写，应为纯数字"
  })
    .then(({ value }) => {
      tableData[15].safeMeasures = "起吊物的质量(" + value + " 吨)经确认，在吊装机械的承重范围内。"
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消"
      })
    })
}

const openSignatureModal = function(row) {
  checkInfo.value = row
  dialogTableVisible.value = true
}
const openModal = function() {
  SignaturePadShow.value = true
}
const closeModal = function() {
  dialogTableVisible.value = false
}
const closedModal = function() {
}
const SubmitCraneOperation = function() {
  const loading = ElLoading.service({
    lock: true,
    text: "正在存储...",
    background: "rgba(0, 0, 0, 0.7)"
  })
  createCraneOperationRisk({ id: props.id, organizer: organizer.value, safetyPrecautions: JSON.stringify(tableData) }).then(
    (res: { ret: boolean }) => {
      if (res.ret) {
        loading.close()
        emit("changState", {
          state: 2
        })
      }
    }
  )
}
const clearSign = function() {
  signaturePadRef.value.clearSignature()
}
const quickSignature = function(imageData) {

  tableData.forEach((item) => {
    if (item.safeMeasures == checkInfo.value.safeMeasures) {
      item.confirmPerson = imageData
    }
  })
  dialogTableVisible.value = false
  SignaturePadShow.value = false
}
</script>

<template>
  <div class="w-full h-full relative flex flex-col justify-center items-center">
    <el-table border :data="tableData" height="620px" style="width: 100%">
      <el-table-column header-align="center" type="index" label="序号" width="60" />
      <el-table-column header-align="center" prop="safeMeasures" label="安全措施" width="800">
        <template #default="scope">
          <span v-if="scope.row.safeMeasures.indexOf('起吊物的质量') == -1">
            <span v-if="scope.row.safeMeasures.indexOf('其他安全措施') != -1">
              {{ scope.row.safeMeasures }}
              <el-button type="primary" @click="other">填写其他安全措施</el-button>
            </span>
            <span v-else>
              {{ scope.row.safeMeasures }}
            </span>
          </span>
          <span v-else>
            <div>
              {{ scope.row.safeMeasures }}
              <el-button type="primary" @click="fillingQuality">填写质量</el-button>
            </div>
          </span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" prop="isInvolved" label="是否采取">
        <template #default="scope">
          <el-radio-group v-model="scope.row.isInvolved">
            <el-radio :value="1">✓</el-radio>
            <el-radio :value="2">✕</el-radio>
            <el-radio :value="3">/</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" prop="confirmPerson" label="确认人">
        <template #default="scope">
          <div class="w-full h-full flex justify-center items-center">
            <div
              v-if="!scope.row.confirmPerson"
              style="letter-spacing: 20px"
              class="w-full text-center"
              @click="openSignatureModal(scope.row)"
            >
              点击签字
            </div>
            <img
              v-else
              class="confirmPerson"
              :src="scope.row.confirmPerson"
              alt="confirmPerson"
              @click="openSignatureModal(scope.row)"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="w-full">
      <el-col :span="12">
        <span>编制人：</span>
        <span
          v-if="!organizer"
          style="letter-spacing: 20px"
          class="text-center"
          @click="openSignatureModal('organizer')"
        >
          点击签字
        </span>
        <img
          v-if="organizer"
          :src="organizer"
          style="height: 50px; display: inline-block"
          alt="jsjdr"
          @click="openSignatureModal('organizer')"
        />
      </el-col>
    </el-row>
  </div>
  <el-dialog
    v-model="dialogTableVisible"
    class="SignaturePad"
    :show-close="false"
    destroy-on-close
    top="40vh"
    width="800"
    @open="openModal"
    @closed="closedModal"
  >
    <template #header></template>
    <div class="w-[800px] h-[200px] flex justify-between">
      <div class="w-[500px] h-[220px] flex flex-col justify-around">
        <VueSignaturePad
          v-if="SignaturePadShow"
          ref="signaturePadRef"
          width="500px"
          height="150px"
          :custom-style="{
            backgroundColor: '#e6eef4',
            borderRadius: '15px'
          }"
        />
        <div class="flex justify-around">
          <button class="custom-btn btn-1" @click="closeModal">退出</button>
          <button class="custom-btn btn-3" @click="clearSign">清空</button>
          <button class="custom-btn btn-2" @click="submitSignature">确定</button>
        </div>
      </div>
      <div class="w-[200px]">
        <div
          v-for="item in SignatureCopyArray"
          :key="item"
          class="bg-white"
          @click="quickSignature(item)"
        >
          <img class="h-[30px] my-1.5" :src="item" alt="" />
        </div>
      </div>
    </div>
    <div></div>
  </el-dialog>
  <el-button type="primary" class="absolute bottom-10 right-10" @click="SubmitCraneOperation"
  >下一步
  </el-button>
</template>
<style scoped>
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0 rgba(255, 255, 255, 0.5),
  7px 7px 20px 0 rgba(0, 0, 0, 0.1),
  4px 4px 5px 0 rgba(0, 0, 0, 0.1);
  outline: none;
  font-size: 15px;
}

.btn-2 {
  background: #004dff;
  background: linear-gradient(0deg, #004dff 0%, #004dff 100%);
  border: none;
}

.btn-2:before {
  height: 0;
  width: 2px;
}

.btn-1 {
  background: #ff5252;
  background: linear-gradient(0deg, #ff5252 0%, #ff5252 100%);
  border: none;
}

.btn-3 {
  background: #2ac2d1;
  background: linear-gradient(0deg, #2ac2d1 0%, #2ac2d1 100%);
  border: none;
}

.btn-1:before {
  height: 0;
  width: 2px;
}

.confirmPerson {
  height: 20px !important;
}
</style>
